<template>
    <div class="vm-content-container">
        <!-- 切换类型 -->
        <div class="vm-content-nav">
            <nav :class="{active:cartgoryType=='requireInfo'}" @click="vmToggleContent('requireInfo')">
                <p>需求信息</p>
                <router-link to="require" tag="span" class="more"></router-link>
            </nav>
            <nav :class="{active:cartgoryType=='projectInfo'}"  @click="vmToggleContent('projectInfo')">
                <p>项目信息</p>
                <router-link to="project" tag="span" class="more"></router-link>
            </nav>
        </div>

        <!-- 拖动组件 -->
        <vm-common-tab-view :requireTabData="requireTabData" v-if="cartgoryType == 'requireInfo'"></vm-common-tab-view>

        <!-- 列表组件 -->
        <vm-index-content-list></vm-index-content-list>
    </div>
</template>

<script>
import vmCommonTabView from '@/components/vm-common-tab-view.vue' // 拖动组件
import vmIndexConentList from '@/components/index/vm-index-content-list.vue' // 列表组件
export default {
    data () {
        return {
            cartgoryType: 'requireInfo',
            requireTabData : [
                { title: '全部', active: true, type: 0 },
                { title: '询价比', type: 1 },
                { title: '竞价', type: 5 },
                { title: '招投标', type: 4 },
                { title: '竞争性谈判', type: 2 },
                { title: '单一来源', type: 3 }
            ]
        }
    },
    methods: {
        vmToggleContent (cartgory) {
            this.cartgoryType = cartgory;
        },
    },
    components: {
        'vm-common-tab-view': vmCommonTabView,
        'vm-index-content-list': vmIndexConentList
    },
    watch: {
        cartgoryType: {
            handler () {
                this.$root.Bus.$emit('changeNavType',this.cartgoryType);
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.vm-index-container {
    .vm-content-container {
        background-color: #fff;
        margin-top: 20px;
        .vm-content-nav {
            display: flex;
            align-items: center;
        }
        nav {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
            height: 80px;
            p {
                font-size: 30px;
            }
        }
        nav.active {
            color: #da261b;
            border-bottom: 1px solid #d9271b; /* no */
            span.more {
                position: absolute;
                right: 0;
                top: 0;
                height: 100%;
                width: 40px;
                background-color: #e5e5e5;
                display: flex;
                justify-content: center;
                align-items: center;
                &::before {
                    content: '';
                    position: absolute;
                    width: 33px;
                    height: 32px;
                    background: url(../../../static/images/mv_Spirit.png) no-repeat;
                    background-size: 881px 1149px;
                    background-position: -88px 0;
                }
            }
        }
    }
}
</style>

